@import './bw';

.line3{
    position: absolute;
    left: vw(23);
    height: vw(32);
    &::after{
        content: '1';
        display: block;
        width: vw(25);
        height: vw(25);
        background-color: #ff0000;
        color: white;
        font-size: vw(16);
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: vw(-20);
        left: vw(20);
        line-height: vw(24);
    }
    img{
        width: vw(30);
        height: vw(24);
    }
}


section{
    padding: vw(90) 0 vw(96) 0;
    height: 100vh;
    font-size: 0;
    overflow-y: scroll;
    .articleimg{
        padding-top: vw(7);
        position: relative;
        >img{
            height: vw(324);
            width: vw(640);

            &:nth-of-type(2){
                width: vw(73);
                height: vw(8);
                position: absolute;
                bottom: vw(25);
                left: 50%;
                transform: translate(-50%);
            }
        }

        .bgcblack{
            width: 100%;
            height: vw(105);
            background-color: rgba(0,0,0,0.4);
            position: absolute;
            bottom: 0;
            left: 0;
            padding-top: vw(19);

            >p{
                text-align: center;
                line-height: vw(38);
                font-size: vw(26);
                color: white;
                >span{
                    background-color: #b20000;
                }
            }
        }


    }

    .articlebox{
        padding-left: vw(28);
        .manybox{
            background-color: #f6f6f6;
            width: vw(290);
            height: vw(343);
            margin-top: vw(20);
            margin-right: vw(19);
            display: inline-block;
            &:nth-of-type(2n){
                margin-right: 0;
            }
            a{
                >img{
                    width: vw(290);
                    height: vw(189);
                    margin-bottom: vw(14);
                }
            }

            >p{
                font-size: vw(22);
                line-height: vw(26);

                &:nth-of-type(2){
                    font-size: vw(18);
                    color: #c5c5c5;
                    >img{
                        width: vw(35);
                        height: vw(35);
                        margin: 0 vw(8) 0 vw(5); 
                        vertical-align: middle;
                    }
                    >span{
                        margin-right: vw(14);
                        line-height: vw(26);
                        vertical-align: middle;
                    }
                }
            }

            .many{
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 vw(5);
                margin-top: vw(12);
                margin-bottom: vw(12);
                >input{
                    display: inline-block;
                    width: vw(88);
                    height: vw(27);
                    background-color: #b20000;
                    color: white;
                    font-size: vw(18);
                    outline: none;
                    border: none;
                    border-radius: vw(10);
                    padding: 0;
                    line-height: vw(27);
                    margin-right: vw(30);
                }

                >span{
                    font-size: vw(20);
                    color: #c5c5c5;
                    line-height: vw(27);
                    >img{
                        width: vw(21);
                        height: vw(19);
                        margin-right: vw(5);
                    }

                    &:nth-of-type(2){
                        img{
                            width: vw(24);
                            height: vw(14);
                        }
                    }
                }


            }
        }
        >hr{
            display: block;
            width: vw(582);
            height: vw(1);
            border: none;
            background-color: #e2e2e2;
            margin-top: vw(31);
        }
        >p{
            font-size: vw(22);
            color: #c5c5c5;
            margin-top: vw(19);
            text-align: center;
            margin-bottom: vw(19);
        }
    }
}